<template>
  <view class="page-container">
    <!-- 请假详情卡片 -->
    <view class="leave-card">
      <view class="student-info">
        <text class="name">{{ leaveDetail.studentName }}</text>
        <text class="class-id">{{ leaveDetail.studentClass }} | 学号：{{ leaveDetail.studentId }}</text>
      </view>
      <view class="leave-info">
        <view class="info-item"><text class="label">类型：</text>{{ leaveDetail.leaveType }}</view>
        <view class="info-item"><text class="label">时间：</text>{{ leaveDetail.startDate }} 至 {{ leaveDetail.endDate }}</view>
        <view class="info-item"><text class="label">申请时间：</text>{{ leaveDetail.applyTime }}</view>
        <view class="info-item"><text class="label">事由：</text>{{ leaveDetail.reason }}</view>
      </view>
      <view class="status-tag pending-tag">待审批</view>
    </view>

    <!-- 审批操作区 -->
    <view class="approve-area">
      <text class="area-title">审批操作</text>
      <textarea
          v-model="remark"
          placeholder="请输入审批意见（选填）"
          class="remark-input"
      ></textarea>
      <view class="btn-group">
        <button class="reject-btn" @click="handleApprove(2)">拒绝</button>
        <button class="approve-btn" @click="handleApprove(1)">同意</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getLeaveDetail, approveLeave } from '@/common/util.js';

export default {
  data() {
    return {
      leaveId: '',
      leaveDetail: {},
      remark: ''
    };
  },
  onLoad(options) {
    this.leaveId = options.leaveId;
    this.loadDetail();
  },
  methods: {
    loadDetail() {
      const detail = getLeaveDetail(this.leaveId);
      if (!detail) {
        uni.showToast({ title: '未找到请假单', icon: 'none' });
        uni.navigateBack();
        return;
      }
      this.leaveDetail = detail;
    },
    handleApprove(status) {
      const success = approveLeave(this.leaveId, status, this.remark);
      if (!success) {
        return uni.showToast({ title: '审批失败', icon: 'none' });
      }
      // 成功提示并返回
      uni.showToast({
        title: status === 1 ? '审批通过' : '已拒绝',
        icon: 'success',
        duration: 1500
      });
      setTimeout(() => {
        uni.navigateBack({
          success: () => {
            const prevPage = getCurrentPages()[getCurrentPages().length - 2];
            prevPage.loadPending();
          }
        });
      }, 1500);
    }
  }
};
</script>

<style scoped>
.page-container {
  background: #F5F5F5;
  min-height: 100vh;
  padding: 15rpx;
}
.leave-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
/* 复用列表页卡片样式（学生信息/请假信息） */
.student-info, .leave-info, .info-item, .label, .status-tag, .pending-tag {
  margin-bottom: 20rpx;
  font-size: 24rpx;
  color: #666;
}
.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.class-id {
  font-size: 24rpx;
  color: #666;
}
.student-info {
  display: flex;
  justify-content: space-between;
}
.status-tag {
  display: inline-block;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  background: #FFF8E6;
  color: #FF9800;
}

/* 审批操作区样式 */
.approve-area {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.area-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}
.remark-input {
  width: 100%;
  min-height: 150rpx;
  padding: 15rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 30rpx;
  box-sizing: border-box;
}
.btn-group {
  display: flex;
  gap: 20rpx;
}
.reject-btn {
  flex: 1;
  height: 80rpx;
  background: #fff;
  color: #F44336;
  border: 1rpx solid #F44336;
  border-radius: 10rpx;
  font-size: 28rpx;
}
.approve-btn {
  flex: 1;
  height: 80rpx;
  background: #F44336;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 28rpx;
}
</style>